<template>
     <div>
        <div v-for="(item, index) in shuJu" :key="index + ''" class="b-white">
            <ul style="margin-top:10px">
              <li class="d-flex mt-1 border-1 ml-1 mr-1 pb-05 pt-1">
                <div class="w-60">{{item.create_time}}</div>
                <div class="w-40 EB8033" style="text-align:right">已发货</div>
              </li>
              <li class="d-flex flex-wrap pl-1 pt-1">
                <div class="d-flex flex-wrap border-1">
                  <div class="w-30 ml-1">
                    <img
                      :src="item.order_items[0].goods_item.cover"
                      class="w-80"
                    />
                  </div>
                  <div class="d-flex w-65">
                    <div class="w-50">
                      <p>{{item.order_items[0].goods_item.title}}</p>
                      <p>金色</p>
                    </div>
                    <div class="w-50" style="text-align:right">
                      <p class="grey">￥{{item.order_items[0].price}}</p>
                      <p class="grey">*{{item.order_items[0].num}}</p>
                    </div>
                  </div>
                </div>

                <!-- 右半部分 -->
               <div class="d-flex flex-wrap border-1">
                  <div class="w-30 ml-1">
                    <img
                      :src="item.order_items[0].goods_item.cover"
                      class="w-80"
                    />
                  </div>
                  <div class="d-flex w-65">
                    <div class="w-50">
                      <p>{{item.order_items[0].goods_item.title}}</p>
                      <p>金色</p>
                    </div>
                    <div class="w-50" style="text-align:right">
                      <p class="grey">￥{{item.order_items[0].price}}</p>
                      <p class="grey">*{{item.order_items[0].num}}</p>
                    </div>
                  </div>
                </div>
                
                <!-- <div class="w-50">已发货</div> -->
              </li>
              <div class="d-block" style="text-align:right;">共3件商品，合计：￥299.00</div>
              <div style="text-align:right;background:white" class="mt-05 grey b-write  pt-1"><button class="b-white border-g p-03">查看物流</button><button class="ml-1 b-white border-g p-03">确认收货</button></div>
            </ul>
          </div>
    </div>
</template>





<script>
export default {
    props: ["shuJu"]
}
</script>

<style scoped>
.b-white{
  background: white;
}

.border-g{
  border: 1px solid grey;
}

.p-03{
  padding: .3rem;
}
/* //公共样式 */
.d-flex {
    display: flex;
}

.justfly-center {
    justify-content: center;
}

.flex-direction{
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.align-center {
    align-items: center;
}

.space-between {
    justify-content: space-between;
}

.d-block{
    display: block;
}

.space-around {
    justify-content: space-around;
}

.d-innerBlock{
    display: inline-block;
}
.text-center{
    text-align: center;
}

.font-1{
    font-size: 0.1rem;
}

.font-5{
    font-size: 0.5rem;
}

.font-1-5{
    font-size: 1.5rem;
}

.scroll-row{
    white-space: nowrap;
    overflow: auto;
}

.flex-1 {
    flex: 1;
}
.font{
    font-size:0.35rem;
}

.border{
    border: 1px solid #f5f5f5;
}

.border-radius-5
{
    border-radius: 5px;
}

.pt-05{
    padding-top:.5rem;
}

.pt-1 {
    padding-top: 1rem;
}

.pt-2 {
    padding-top: 2rem;
}

.pt-3 {
    padding-top: 3rem;
}

.pt-4 {
    padding-top: 4rem;
}

.pt-5 {
    padding-top: 5rem;
}

.pr-02{
    padding-right: 0.2rem;
}

.pr-1{
    padding-right: 1rem;
}

.pb-1 {
    padding-bottom: 1rem;
}

.pb-2 {
    padding-bottom: 2rem;
}

.pb-3 {
    padding-bottom: 3rem;
}

.pb-4 {
    padding-bottom: 4rem;
}

.pb-5 {
    padding-bottom: 5rem;
}

.w-8{
    width: 80%;
}
.w-10{
    width: 10%;
}
.w-20{
    width: 20%;
}

.w-25{
    width: 25%;
}
.w-30{
    width: 30%;
}
.w-40{
    width: 40%;
}
.w-50{
    width: 50%;
}
.w-60{
    width: 60%;
}
.w-70{
    width: 70%;
}
.w-80{
    width: 80%;
}

.w-90{
    width: 90%;
}

.w-100{
    width: 100%;
}

.h-50{
    height: 50%;
}

.h-100{
    height: 100%;
}

.w-49{
    width: 49%;
}

.listTitle{
    font-size: 1.1rem;
    font-weight: bold;
}

.listDesc{
    color:#C2C2C2;
    font-size: 0.5rem;
}


.listPprice{
    color: #DA570C;
    vertical-align: top;
    font-size: 1.4rem;
}

.d-IB{
    display: inline-block;
}

.vt-0{
    vertical-align: top;
}
.vb-0{
    vertical-align: bottom;
}

.gray{
    color: #C2C2C2;
}

.listMY{
    font-size: 0.8rem;
}

.mt-05{
    margin-top:.5rem;
}

.mt-1 {
    margin-top: 1rem;
}

.mt-2 {
    margin-top: 2rem;
}

.mt-3 {
    margin-top: 3rem;
}

.mt-4 {
    margin-top: 4rem;
}

.mt-5 {
    margin-top: 5rem;
}

.mr-02{
    margin-right: 0.2rem;
}

.mr-05{
    margin-right: .5rem;
}

.mb-05 {
    margin-bottom: .5rem;
}

.mr-1{
    margin-right: 1rem;
}

.mb-1 {
    margin-bottom: 1rem;
}

.mb-2 {
    margin-bottom: 2rem;
}

.mb-3 {
    margin-bottom: 3rem;
}

.mb-4 {
    margin-bottom: 4rem;
}

.mb-5 {
    margin-bottom: 5rem;
}

.ml-03 {
    margin-left: .3rem;
}

.ml-1 {
    margin-left: 1rem;
}

.ml-2 {
    margin-left: 2rem;
}

.ml-3 {
    margin-left: 3rem;
}

.ml-4 {
    margin-left: 4rem;
}

.ml-5 {
    margin-left: 5rem;
}

.p-05{
    padding: .5rem;
}

.pl-05{
    padding-left: 0.5rem;
}

.pl-1{
    padding-left: 1rem;
}
.pl-2{
    padding-left: 2rem;
}

.pt-1{
    padding: 1rem;
}

.w-60{
    width: 60%;
}
.w-40{
    width: 40%;
}

.mr-03 {
    margin-right: .3rem;
}

.mr-1 {
    margin-right: 1rem;
}

.mr-2 {
    margin-right: 2rem;
}

.mr-3 {
    margin-right: 3rem;
}

.mr-4 {
    margin-right: 4rem;
}

.w-65{
    width: 65%;
}

.border-1{
    border-bottom: 1px solid grey;
}

.pb-05{
    padding-bottom: 0.5rem;
}
.mt-05{
    margin-top: 0.5rem;
}

.grey{
    color: grey;
}

.b-write{
    background-color: white;
}

.EB8033{
    color: #EB8033;
}

.b-white{
    background-color: white;
}

.align-self{
    align-self: flex-end;
}
</style>